import React from 'react'
import { connect } from 'dva'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import { Page } from 'components'
import DistributorTree from './tree/Tree'
import { Row, Col, Button } from 'antd'
import DistributorForm from './tree/DistributorFormModal'
import Table from './tree/Table'
import BindSteps from './tree/BindSteps'
import { showButton } from '../../utils/promissionFilter'

const tree = ({ location, dispatch, userManage, distributor, bindUser, user, role, app, loading }) => {
  const {
    tree,
    currentItem,
    userIds,
    users,
    distributorUsers,
    lwjUsers,
    modalVisible: modalDistributorVisible
  } = userManage
  const {
    user: bindUserItem,
    modalVisible: bindUserModalVisible,
    step: bindUserStep,
    roleIds,
    rolesModalVisible,
  } = bindUser

  const {
    roles,
    detailVisible
  } = user

  const {
    items: roleItems
  } = role

  const { user: userModel, resources } = app

  const breadcrumbList = [
    {
      title: '系统管理'
    },
    {
      title: '员工管理'
    },
  ]

  /**
   * 树的Props
   * @type {{dataSource: *, defaultExpandAll: boolean, showLine: boolean, distributorType: *, onSelect: onSelect}}
   */
  const treeProps = {
    dataSource: tree,
    defaultExpandAll: true,
    showLine: true,
    showIcon: false,
    distributorType: 'update',
    onSelect: (datum) => {
      dispatch({
        type: 'userManage/onChoose',
        payload: {
          ...datum
        }
      })
    },
    dispatch,
  }

  const onSetDistributor = () => {
    dispatch({
      type: 'userManage/edit',
      payload: {}
    })
  }

  /**
   * 解绑人员
   */
  const onUnbindUser = () => {
    dispatch({
      type: 'userManage/onUnbindUser',
      payload: {
        id: currentItem.organizationId,
        ids: userIds
      }
    })
  }

  /**
   * 绑定用户
   */
  const onBindUser = () => {
    dispatch({
      type: 'bindUser/showModal',
      payload: {}
    })
  }

  /**
   * 门店模态框设置
   * @type {{title: string, visible: *, onOk: onOk, confirmLoading: boolean, onCancel: onCancel, item: {}, destroyOnClose: boolean}}
   */
  const distributorModalProps = {
    title: '修改门店信息',
    visible: modalDistributorVisible,
    onOk: (datum) => {
      dispatch({
        type: 'userManage/onUpdate',
        payload: { id: currentItem.id, datum: datum }
      })
    },
    confirmLoading: false,
    onCancel: () => {
      dispatch({
        type: 'userManage/hideModal',
        payload: {}
      })
    },
    item: currentItem,
    destroyOnClose: true,
  }

  /**
   * 用户绑定步骤条Modal
   * @type {{title: string, visible: *, confirmLoading: boolean, destroyOnClose: boolean, onCancel: onCancel, footer: boolean, width: number, bindUserStep: *}}
   */
  const bindModalProps = {
    title: '用户绑定',
    visible: bindUserModalVisible,
    confirmLoading: false,
    destroyOnClose: true,
    onCancel: () => {
      dispatch({
        type: 'bindUser/hideModal',
        payload: {}
      })
      dispatch({
        type: 'bindUser/destroyUser',
        payload: {}
      })
    },
    footer: false,
    width: 800,
    bindUserStep,
    dispatch,
    bindUserItem,
    roleItems,
    roleIds,
    currentItem,
    user: bindUser.user
  }

  /**
   * 已选用户列表的设置
   * @type {{dataSource: *, selectedRowKeys: *, onSelectUserRows(*=, *): void}}
   */
  const userListProps = {
    dataSourceByDistributor: distributorUsers,
    dataSourceByLwj: lwjUsers,
    selectedRowKeys: userIds,
    roles,
    rolesModalVisible,
    dispatch,
    loading,
    currentItem,
    onSelectUserRows(selectedRowKeys, selectRows) {
      dispatch({
        type: 'userManage/bindUser',
        payload: {
          userIds: selectedRowKeys
        }
      })
    },
    showRolesModal(status) {
      dispatch({
        type: 'bindUser/showRolesModal',
        payload: status
      })
    },
    showRole(record) {
      dispatch({
        type: 'user/getUserRoles',
        payload: record.id
      })
    },
  }
  /**
   * Col的样式设置
   * @type {{xs: number, sm: number, style: {marginBottom: number}}}
   */
  const ColProps = {
    xs: 24,
    sm: 24,
    style: {
      marginBottom: 16
    }
  }

  return (
    <PageHeaderLayout title='员工管理' breadcrumbList={breadcrumbList}>
      <Page inner>
        <Row>
          <Col span={12}>
            <Row gutter={24}>
              <Col {...ColProps}>
                {'id' in currentItem && showButton('userManage.distributor.update', resources, userModel) &&
                  <Button type="primary" size="small" className="margin-right" onClick={onSetDistributor}>修改门店信息</Button>}
              </Col>
            </Row>
            {tree.length ?
              <DistributorTree {...treeProps} /> : null}
            {modalDistributorVisible && <DistributorForm {...distributorModalProps} />}
          </Col>
          <Col span={12}>
            <Row gutter={24}>
              <Col {...ColProps}>
                {bindUserModalVisible && <BindSteps {...bindModalProps} />}
                {typeof currentItem.id !== 'undefined' &&
                  <Button type="primary" size="small" className="margin-right" onClick={onBindUser}>绑定人员</Button>}
                {typeof currentItem.id !== 'undefined' &&
                  <Button type="primary" size="small" className="margin-right" onClick={onUnbindUser}>解绑人员</Button>}
              </Col>
              <Col {...ColProps}>
                <Table userListProps={userListProps} />
              </Col>
            </Row>
          </Col>
        </Row>
      </Page>
    </PageHeaderLayout>
  )
}

export default connect(({ userManage, distributor, bindUser, user, loading, role, app }) => ({
  userManage,
  distributor,
  bindUser,
  user,
  loading,
  role,
  app
}))(tree)
